<link  type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
      dir: 'https://www.layuicdn.com/layui/' 
      ,version: false 
      ,debug: false 
      ,base: '' 
    });
</script>



<!-- 框架的组件文档 "https://www.layui.com/doc/element/tab.html" -->
<div class="layui-tab" style="margin: 0">
	<ul class="layui-tab-title">
		<li class="layui-this">网站设置</li>
		<li>用户管理</li>
		<li>权限分配</li>
		<li>商品管理</li>
		<li>订单管理</li>
	</ul>


	<!-- 内容区域 -->
	<div class="layui-tab-content" style="margin:0">
		<div class="layui-tab-item layui-show" style="background-color: #666;height: 90vh">

			内容1
		</div>


		<div class="layui-tab-item" style="background-color: #666;height: 90vh">

			内容2
		</div>


		<div class="layui-tab-item" style="background-color: #666;height: 90vh">

			内容3
		</div>


		<div class="layui-tab-item" style="background-color: #666;height: 90vh">

			内容4
		</div>


		<div class="layui-tab-item" style="background-color: #666;height: 90vh">

			内容5
		</div>
	</div>
</div>

<script type="text/javascript">
	//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
	layui.use('element', function(){
		var element = layui.element;

	  //…
	});
	$('.layui-tab-title li').click(function(){
		console.log($(this).text()); 
	})
</script>